<div id="content" class="container">
  <h1 class="my-4">PIN Pairing</h1>
  <form action="" class="form d-flex flex-column align-items-center" id="form">
    <div class="card flex-column d-flex p-4 mb-4">
      <input
        type="number"
        placeholder="PIN"
        id="pin-input"
        class="form-control my-4"
      />
      <button class="btn btn-primary">Send</button>
    </div>
    <div class="alert alert-warning">
      <b>Warning!</b> Make sure you have access to the client you are pairing
      with.<br />
      This software can give total control to your computer, so be careful!
    </div>
    <div id="status"></div>
  </form>
</div>

<script>
  document.querySelector("#form").addEventListener("submit", (e) => {
    e.preventDefault();
    let pin = document.querySelector("#pin-input").value;
    document.querySelector("#status").innerHTML = "";
    let b = JSON.stringify({ pin: pin });
    fetch("/api/pin", { method: "POST", body: b })
      .then((response) => response.json())
      .then((response) => {
        if (response.status.toString().toLowerCase() === "true") {
          document.querySelector(
            "#status"
          ).innerHTML = `<div class="alert alert-success" role="alert">Success! Please check Moonlight to continue</div>`;
          document.querySelector("#pin-input").value = "";
        } else {
          document.querySelector(
            "#status"
          ).innerHTML = `<div class="alert alert-danger" role="alert">Pairing Failed: Check if the PIN is typed correctly</div>`;
        }
      });
  });
</script>
